<template>
  <v-app>
    <v-navigation-drawer
            v-model="drawer"
            :color="color"
            permanent
            app clipped dark>
      <v-list dense nav class="py-0">
        <v-list-item>
          <v-list-item-avatar>
            <img src="./assets/zimug.jpg">
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title>字母哥</v-list-item-title>
            <v-list-item-subtitle>dongbb</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>

        <v-divider></v-divider>

        <v-list-item v-for="item in items" :key="item.title" :to="item.target" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar
      style="-webkit-app-region:drag;"
      color="primary"
      clipped-left
      app
      dark
    >
      <div class="d-flex align-center">
        <v-img
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="./assets/dongbb-coder.png"
          width="200"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn @click="toDoc"
             style="-webkit-app-region:no-drag;"
             target="_blank" text>
        <span class="mr-2">使用手册</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
        <router-view></router-view>
    </v-main>

  </v-app>
</template>

<script>

import { shell } from 'electron'

export default {
  name: 'App',

  components: {

  },

  data: () => ({
    drawer: true,
    items: [
      { title: '首页介绍', icon: 'mdi-book-open-variant',target:"/" },
      { title: 'DB  配置', icon: 'mdi-database',target:"/database" },
      { title: '项目配置', icon: 'mdi-buffer' ,target: "/project"},
      { title: '模板配置', icon: 'mdi-content-copy',target: "/template" },
      { title: '代码生成', icon: 'mdi-lan',target: "/generator" },
    ],
    color: 'primary'
  }),
  methods:{
    toDoc(){
      shell.openExternal('https://www.kancloud.cn/hanxt/vue-spring/1911143')
    }
  }
};
</script>

<style>
  .v-dialog{
    -webkit-app-region:no-drag
  }
  .v-main__wrap{
    -webkit-app-region:no-drag
  }

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 2px; /*滚动条宽度*/
    height: 2px;  /*滚动条高度*!*/
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;   /*滚动条的背景区域的圆角*!*/
    background-color: red; /*滚动条的背景颜色*!*/
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 99px; /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: green;  /*滚动条的背景颜色*!*/
  }


  table{
     border-radius: 2px;
     border-collapse: collapse;
     border-spacing: 0;
     width: 100%;
     max-width: 100%;
     table-layout: fixed;
     word-break: break-all;
     word-wrap: break-word;
  }

</style>
